<template>
  <div class="flex">
    <div class="block">
      <el-upload
        class="avatar-uploader"
        :action="profileInfo.avatar"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <el-avatar
          :size="130"
          :src="profileInfo.avatar?profileInfo.avatar:'https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/ignore-error/1'"
          class="avatar"
          :on-success="handleAvatarSuccess"
        />
      </el-upload>
      <p class="change">点击更换</p>
    </div>
    <el-form
      label-position="left"
      label-width="100px"
      class="formInfo"
    >
      <div>
        <el-form-item label="用户名：">
          <el-input v-model="profileInfo.account"/>
        </el-form-item>
        <el-form-item label="性别：">
          <el-button plain color="#f93684" style="padding: 0px 30px">男</el-button>
          <el-button plain color="#f93684" style="padding: 0px 30px">女</el-button>
        </el-form-item>
        <el-form-item label="成长等级：">
          <el-button size="small" class="btn"><i></i><i></i></el-button>
        </el-form-item>
        <el-form-item label="兴趣技能：">
          <el-tag
            v-for="item in profileInfo.avocation" :key="item.id" type="info" closable
            :disable-transitions="false"
            @close="handleClose(item)"
          >{{ item.name }}
          </el-tag>
          <el-button type="primary" color="#f5f7f9" @click="showDialog">请选择</el-button>
          <PopUp
           :dialogVisible="dialogVisible"
           @delOp="delOp"
          ></PopUp>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="生日：">
          <el-date-picker
            :disabled-date="disabledDate"
            v-model="formLabelAlign.birthDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="城市：">
          <el-select v-model="formLabelAlign.city" filterable placeholder="请选择">
            <el-option
              v-for="item in formLabelAlign.provinces"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="技能水平：">
          <el-select v-model="formLabelAlign.skillLevelName" filterable placeholder="请选择">
            <el-option
              v-for="item in formLabelAlign.skillLevelList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-icon class="exclamation" size="large" @click="open">
            <WarningFilled/>
          </el-icon>
        </el-form-item>
      </div>
    </el-form>
    <div class="savebtn" @click="open2"><span>保存</span></div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Profile"
})
</script>
<script lang="ts" setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, ref, reactive, watch} from "vue";
import type {UploadProps, Action} from 'element-plus'
import {reqInterestList} from "@/api/profile";
import PopUp from "@/views/center/Profile/Pop-up/index.vue";
const formLabelAlign = reactive({
  imageUrl:'',
  account: '',
  birthDate: '',
  avocation: [],
  city: '',
  skillLevelName: '',
  provinces: ["北京", "天津", "上海", "重庆", "新疆", "西藏", "宁夏", "内蒙古",
    "广西", "黑龙江", "吉林", "辽宁", "河北", "山东", "江苏", "安徽",
    "浙江", "福建", "广东", "海南", "云南", "贵州", "四川", "湖南",
    "湖北", "河南", "山西", "陕西", "甘肃", "青海", "江西", "台湾", "香港", "澳门"],
  skillLevelList: ["零基础", "业余初级", "业余中级", "业余高级", "专业初级", "专业中级", "专业高级"]
})
const props = defineProps({
  profileInfo: <any>{}
})
const interest = ref<any>({
  interestList: [],
  interestNum: 0
})
onMounted(async () => {
  try {
    const re = await reqInterestList()
    const arr = re.data.content.map((item : any)=>item.isCheck = false)
    interest.value.interestList = arr
    interest.value.interestNum = re.data.number
  } catch (e: any) {
    alert(e.message)
  }
})

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  formLabelAlign.imageUrl = URL.createObjectURL(uploadFile.raw!)
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log('上传成功')
  return true
}

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const open = () => {
  ElMessageBox.alert('平台将根据你选择的技能水平，优先智能推荐相应内容。', '技能水平', {
    confirmButtonText: '确定'
  })
}
const open2 = () => {
  ElMessage({
    showClose: true,
    message: '修改成功',
    type: 'success',
  })
}
const handleClose = (tag: any) => {
  props.profileInfo.avocation.splice(props.profileInfo.avocation.indexOf(tag), 1)
}

const dialogVisible = ref<boolean>(false)

const delOp = ()=>{
  dialogVisible.value = false;
}
const showDialog = ()=>{
  dialogVisible.value = true;
}
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  justify-items: center;
  text-align: center;
  flex-direction: column;

  .block {
    flex: 1;
    margin-top: 30px;

    .avatar:hover {
      box-shadow: 0px 0px 1px 2px #fca0c5;
    }

    .change {
      color: #7d8090;
    }
  }

  .formInfo {
    max-width: 800px;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;

    .btn {
      background: linear-gradient(#ff289b, #ff43d0);
      color: #f9f9f9;
      border-radius: 4px;
      padding-left: 8px;

      :nth-of-type(1) {
        width: 15px;
        height: 10px;
        background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
        display: inline-block;
        background-size: 100%;
        background-repeat: no-repeat;
      }

      :nth-of-type(2) {
        width: 8px;
        height: 10px;
        display: inline-block;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(https://rs.dance365.com/level_num_1@3x.png);
      }
    }

    .exclamation {
      margin-left: 5px;
      transform: rotateX(180deg);
    }

    .exclamation:hover {
      color: #f93684;
    }
  }

  .savebtn {
    width: 120px;
    height: 22px;
    margin: 0px auto 0px;
    display: block;
    color: #fff;
    background-color: #f93684;
    border-color: #f93684;
    padding: 15px 15px;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;

    span {
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
    }
  }


}
</style>
